<template>
	<link rel="stylesheet" type="text/css" media="print" href="/css/print-lock.css">
	<el-container>
		<el-header>
			<div class="left-panel">
				
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-input v-model="list.query.procedure_name" placeholder="流程名" clearable/>
					<el-input v-model="list.query.color" placeholder="颜色" clearable/>
					<el-input v-model="list.query.size" placeholder="尺码" clearable/>
					<el-input v-model="list.query.gh" placeholder="缸号" clearable/>

					<el-date-picker value-format="YYYY-MM-DD" v-model="list.query.date" style="width: 100%;"  type="date" placeholder="选择时间"></el-date-picker>
					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="list.apiObj" row-key="id" @selection-change="selectionChange" stripe>

				<el-table-column  label="流程名" prop="procedure_name" ></el-table-column>

				<el-table-column label="批次号" prop="id" width="100px"></el-table-column>
				
				<el-table-column label="缸号" prop="gh" width="300px">
					<template #default="scope">
						<el-tag  style="font-weight: bold; font-size: 18px" type="danger">{{scope.row.gh}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="打印日期" prop="created_at"></el-table-column>
				<el-table-column label="颜色" prop="color">
					<template #default="scope">
						<el-tag  style="font-weight: bold; font-size: 18px" >{{scope.row.color}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="尺码" prop="size" width="100">
					<template #default="scope">
						<el-tag  style="font-weight: bold; font-size: 18px" >{{scope.row.size}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作"  align="left" width="200" >
					<template #default="scope">
						<el-button type="primary" plain size="small" @click="printAgain(scope.row)">打印</el-button>
						<el-button type="primary" plain size="small" @click="tasks(scope.row)">分配工序</el-button>
						<el-button type="danger" plain size="small" @click="refresh(scope.row)" :loading="refresh_loading">同步添加(少用)</el-button>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>

	<tasks-dialog v-if="dialog.task" ref="taskDialog" @success="handleTaskSuccess" @closed="dialog.task=false"></tasks-dialog>

</template>

<script>
	import { hiprint } from "vue-plugin-hiprint";
	import tasksDialog from "./tasks"
	export default {
		name: 'listCrud',
		components: {
			tasksDialog,
		},
		data() {
			return {
				dialog: {
					task: false
				},
				list: {
					apiObj: this.$API.procedure.findPrint,
					query: {
						color: '',
						size: '',
						gh: ''
					}
				},
				selection: [],
				refresh_loading : false
			}
		},
		mounted() {
			hiprint.init({
			    //providers: [defaultElementTypeProvider()],
			});
			
		},
		methods: {
			upsearch() {
				this.$refs.table.upData(this.list.query)
			},
			tasks(row) {
				this.dialog.task = true
				this.$nextTick(() => {
					this.$refs.taskDialog.open("show").setData(row)
				})
			},
			async refresh(row) {
				this.refresh_loading = true
				var reqData = {
					patch_id: row.id,
					procedure_name: row.procedure_name
				}

				this.$API.workshop.taskRefresh.post(reqData).then(res => {
					this.refresh_loading = false
					if (res.code == 200) {
						this.$refs.table.refresh()
					} else {
						this.$message.error(res.msg)
					}
				}).catch(err => {
					this.$message.error(err)
					this.refresh_loading = false
				})
				
			},
			async printAgain(row) {
				var print_data = {}
				// 获取打印数据
				var printed_res = await this.$API.procedure.getPrintData.get(row);
				if (printed_res.code == 200) {
					print_data = printed_res.data
				} else {
					return
				}

				var res = await this.$API.printTmp.get.get({type: 'procedure'});
				var print_json = res.data.json_data
				var hiprintTemplate = new hiprint.PrintTemplate({
				    template: JSON.parse(print_json)
				});

				hiprintTemplate.print2([print_data])
			}
		}
	}
</script>

<style>
</style>
